<template>
    <div >
        <template v-for="elementItem in computedElementItems">
            <el-form-item
                    v-if="$stObjectTools.getVal(elementItem.element,'show',getValParam())=== false  ? false : true"
                    :label="elementItem.element.labelShow ===false ? '' : elementItem.element.label"
                    :key="elementItem.field.name"
                    :prop="detailMode ? null: elementItem.field.name"
                    :style="elementItem.element.style"
                    :class="elementItem.element.class"
                    :stElementBlock="elementItem.element.isBlock ? 'st-element-item-block':''"
                    :rules="getFormItemRules(elementItem)"
                    :ref="'elFormItem' + elementItem.field.name"
            >
                <template v-if="elementItem.element.sslot">
                    <slot :name="elementItem.element.sslot" v-bind:form="form" v-bind:elementItem="elementItem" v-bind:formExtData="formExtData"></slot>
                </template>
                <template v-else-if="elementItem.element.type == 'txt'">
                    {{txtValue(elementItem.field.name)}}
                </template>
                <template v-else-if="elementItem.element.type == 'image'">
                    <el-image v-if="ensureImageSrcIsString(imageSrc(elementItem.field.name))"
                            style="width: 215px; height: 215px"
                            :src="ensureImageSrcIsString(imageSrc(elementItem.field.name))"
                            :preview-src-list="ensureImageSrcIsArray(imageSrc(elementItem.field.name))">
                        <i slot="error" class="el-icon-picture-outline"></i>

                    </el-image>
                  <div v-if="ensureImageSrcIsArray(imageSrc(elementItem.field.name)).length > 1"> 共 {{ensureImageSrcIsArray(imageSrc(elementItem.field.name)).length}} 张</div>
                </template>
                <template v-else>
                    <el-input v-if="!elementItem.element.type || elementItem.element.type == 'text'"
                              v-model="form[elementItem.field.name]"
                              :disabled="$stObjectTools.getVal(elementItem.element,'disabled',getValParam())"
                              :readonly="$stObjectTools.getVal(elementItem.element,'readonly',getValParam())"
                              v-bind="$stObjectTools.getVal(elementItem.element,'options',getValParam())"
                              clearable></el-input>
                    <StElSelect v-else-if="elementItem.element.type == 'select'"
                                v-model="form[elementItem.field.name]"
                                v-bind="$stObjectTools.getVal(elementItem.element,'options',getValParam())"
                                v-on:data="(data)=>{formExtData[elementItem.field.name] = data}"
                                :disabled="$stObjectTools.getVal(elementItem.element,'disabled',getValParam())"
                                :readonly="$stObjectTools.getVal(elementItem.element,'readonly',getValParam())"
                    >

                    </StElSelect>
                    <StElSelectDict v-else-if="elementItem.element.type == 'selectDict'"
                                v-model="form[elementItem.field.name]"
                                v-bind="$stObjectTools.getVal(elementItem.element,'options',getValParam())"
                                    v-on:data="(data)=>{formExtData[elementItem.field.name] = data}"
                                :disabled="$stObjectTools.getVal(elementItem.element,'disabled',getValParam())"
                                :readonly="$stObjectTools.getVal(elementItem.element,'readonly',getValParam())"
                    >

                    </StElSelectDict>
                    <el-switch v-else-if="elementItem.element.type == 'switch'"
                               v-model="form[elementItem.field.name]"
                               v-bind="$stObjectTools.getVal(elementItem.element,'options',getValParam())"
                               :disabled="$stObjectTools.getVal(elementItem.element,'disabled',getValParam())"
                               :readonly="$stObjectTools.getVal(elementItem.element,'readonly',getValParam())"
                    ></el-switch>
                    <el-input v-else-if="elementItem.element.type == 'textarea'"
                              v-model="form[elementItem.field.name]"
                              type="textarea"
                              :autosize="{minRows: 6}"
                              v-bind="$stObjectTools.getVal(elementItem.element,'options',getValParam())"
                              :disabled="$stObjectTools.getVal(elementItem.element,'disabled',getValParam())"
                              :readonly="$stObjectTools.getVal(elementItem.element,'readonly',getValParam())"
                              clearable></el-input>
                    <el-input-number v-else-if="elementItem.element.type == 'inputNumber'"
                                     v-model="form[elementItem.field.name]"
                                     v-bind="$stObjectTools.getVal(elementItem.element,'options',getValParam())"
                                     :disabled="$stObjectTools.getVal(elementItem.element,'disabled',getValParam())"
                                     :readonly="$stObjectTools.getVal(elementItem.element,'readonly',getValParam())"
                                     clearable></el-input-number>
                    <el-date-picker
                            v-else-if="elementItem.element.type == 'date'"
                            v-model="form[elementItem.field.name]"
                            value-format="yyyy-MM-dd"
                            type="date"
                            v-bind="$stObjectTools.getVal(elementItem.element,'options',getValParam())"
                            :disabled="$stObjectTools.getVal(elementItem.element,'disabled',getValParam())"
                            :readonly="$stObjectTools.getVal(elementItem.element,'readonly',getValParam())"
                    >
                    </el-date-picker>
                    <el-date-picker
                            v-else-if="elementItem.element.type == 'datetime'"
                            v-model="form[elementItem.field.name]"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            type="datetime"
                            v-bind="$stObjectTools.getVal(elementItem.element,'options',getValParam())"
                            :disabled="$stObjectTools.getVal(elementItem.element,'disabled',getValParam())"
                            :readonly="$stObjectTools.getVal(elementItem.element,'readonly',getValParam())"
                    > </el-date-picker>
                      <el-date-picker
                        v-else-if="elementItem.element.type == 'datepicker'"
                        v-model="form[elementItem.field.name]"

                        v-bind="$stObjectTools.getVal(elementItem.element,'options',getValParam())"
                        :disabled="$stObjectTools.getVal(elementItem.element,'disabled',getValParam())"
                        :readonly="$stObjectTools.getVal(elementItem.element,'readonly',getValParam())"
                    >
                    </el-date-picker>
                    <el-time-picker
                            v-else-if="elementItem.element.type == 'time'"
                            value-format="HH:mm:ss"
                            v-model="form[elementItem.field.name]"
                            v-bind="$stObjectTools.getVal(elementItem.element,'options',getValParam())"
                            :disabled="$stObjectTools.getVal(elementItem.element,'disabled',getValParam())"
                            :readonly="$stObjectTools.getVal(elementItem.element,'readonly',getValParam())"
                    >
                    </el-time-picker>
                    <StElRadioGroup v-else-if="elementItem.element.type == 'radioGroup'"
                                    v-model="form[elementItem.field.name]"
                                    v-bind="$stObjectTools.getVal(elementItem.element,'options',getValParam())"
                                    v-on:data="(data)=>{formExtData[elementItem.field.name] = data}"
                                    :disabled="$stObjectTools.getVal(elementItem.element,'disabled',getValParam())"
                                    :readonly="$stObjectTools.getVal(elementItem.element,'readonly',getValParam())"
                    >

                    </StElRadioGroup>
                    <StElCheckBoxGroup v-else-if="elementItem.element.type == 'checkBoxGroup'"
                                       v-model="form[elementItem.field.name]"
                                       v-bind="$stObjectTools.getVal(elementItem.element,'options',getValParam())"
                                       v-on:data="(data)=>{formExtData[elementItem.field.name] = data}"
                                       :disabled="$stObjectTools.getVal(elementItem.element,'disabled',getValParam())"
                                       :readonly="$stObjectTools.getVal(elementItem.element,'readonly',getValParam())"
                    >

                    </StElCheckBoxGroup>
                    <StElCascader v-else-if="elementItem.element.type == 'cascader'"
                                  v-model="form[elementItem.field.name]"
                                  v-bind="$stObjectTools.getVal(elementItem.element,'options',getValParam())"
                                  v-on:data="(data)=>{formExtData[elementItem.field.name] = data}"
                                  :disabled="$stObjectTools.getVal(elementItem.element,'disabled',getValParam())"
                                  :readonly="$stObjectTools.getVal(elementItem.element,'readonly',getValParam())"
                    >

                    </StElCascader>
                    <StElUploadAvatar
                            v-else-if="elementItem.element.type == 'uploadAvatar'"
                            v-model="form[elementItem.field.name]"
                            v-bind="$stObjectTools.getVal(elementItem.element,'options',getValParam())"
                            v-on:data="(data)=>{formExtData[elementItem.field.name] = data}"
                            :disabled="$stObjectTools.getVal(elementItem.element,'disabled',getValParam())"
                            :readonly="$stObjectTools.getVal(elementItem.element,'readonly',getValParam())"
                    ></StElUploadAvatar>
                    <StElUploadSingleImage
                            v-else-if="elementItem.element.type == 'uploadSingleImage'"
                            v-model="form[elementItem.field.name]"
                            v-bind="$stObjectTools.getVal(elementItem.element,'options',getValParam())"
                            v-on:data="(data)=>{formExtData[elementItem.field.name] = data}"
                            :disabled="$stObjectTools.getVal(elementItem.element,'disabled',getValParam())"
                            :readonly="$stObjectTools.getVal(elementItem.element,'readonly',getValParam())"
                    ></StElUploadSingleImage>
                    <StElUploadFileRaw
                            v-else-if="elementItem.element.type == 'uploadFileRaw'"
                            v-model="form[elementItem.field.name]"
                            v-bind="$stObjectTools.getVal(elementItem.element,'options',getValParam())"
                            :disabled="$stObjectTools.getVal(elementItem.element,'disabled',getValParam())"
                            :readonly="$stObjectTools.getVal(elementItem.element,'readonly',getValParam())"
                    ></StElUploadFileRaw>
                    <StElUploadInput
                            v-else-if="elementItem.element.type == 'uploadInput'"
                            v-model="form[elementItem.field.name]"
                            v-bind="$stObjectTools.getVal(elementItem.element,'options',getValParam())"
                            :disabled="$stObjectTools.getVal(elementItem.element,'disabled',getValParam())"
                            :readonly="$stObjectTools.getVal(elementItem.element,'readonly',getValParam())"
                    ></StElUploadInput>
                  <StElUploadFile
                      v-else-if="elementItem.element.type == 'uploadFile'"
                      v-model="form[elementItem.field.name]"
                      v-bind="$stObjectTools.getVal(elementItem.element,'options',getValParam())"
                      :disabled="$stObjectTools.getVal(elementItem.element,'disabled',getValParam())"
                      :readonly="$stObjectTools.getVal(elementItem.element,'readonly',getValParam())"
                  ></StElUploadFile>
                    <StElTree v-else-if="elementItem.element.type == 'tree'"
                                   v-model="form[elementItem.field.name]"
                                   v-bind="$stObjectTools.getVal(elementItem.element,'options',getValParam())"
                                   :disabled="$stObjectTools.getVal(elementItem.element,'disabled',getValParam())"
                                   :readonly="$stObjectTools.getVal(elementItem.element,'readonly',getValParam())">

                    </StElTree>
                    <el-color-picker v-else-if="elementItem.element.type == 'colorPicker'"
                                     v-model="form[elementItem.field.name]"
                                     v-bind="$stObjectTools.getVal(elementItem.element,'options',getValParam())"
                                     :disabled="$stObjectTools.getVal(elementItem.element,'disabled',getValParam())"
                                     :readonly="$stObjectTools.getVal(elementItem.element,'readonly',getValParam())">

                    </el-color-picker>
                    <StTinymceEditor v-else-if="elementItem.element.type == 'tinymceEditor'"
                                     v-model="form[elementItem.field.name]"
                                     v-bind="$stObjectTools.getVal(elementItem.element,'options',getValParam())"
                                     :disabled="$stObjectTools.getVal(elementItem.element,'disabled',getValParam())"
                                     :readonly="$stObjectTools.getVal(elementItem.element,'readonly',getValParam())">

                    </StTinymceEditor>
                    <StElCronInput v-else-if="elementItem.element.type == 'cronInput'"
                                     v-model="form[elementItem.field.name]"
                                     v-bind="$stObjectTools.getVal(elementItem.element,'options',getValParam())"
                                     :disabled="$stObjectTools.getVal(elementItem.element,'disabled',getValParam())"
                                     :readonly="$stObjectTools.getVal(elementItem.element,'readonly',getValParam())">

                    </StElCronInput>
                </template>
                <span style="color: #606266;" v-if="elementItem.element.tips" v-html="elementItem.element.tips"></span>
            </el-form-item>
        </template>

    </div>
</template>

<script>
    export default {
        name: "StElDynamicFormItem",
        props: {
            elementItem: {
                type: [Object, Array],
                required: true
            },
            form: {
                type: Object,
            },
            formExtData: {
                type: Object,
                default: function () {
                    return {}
                }
            },
            inline: {
                type: Boolean,
                default: false
            },
            formLabelWidth: {
                type: String
            },
            // 详情模式，因为有的时候详情里面form属性带长路径，导致表单出错
            detailMode:{
                type: Boolean,
                default: false
            }
        },
        computed: {
            computedElementItems() {
                if (this.$stObjectTools.isObject(this.elementItem)) {
                    return [this.elementItem]
                } else {
                    // 认为是数组
                    return this.elementItem
                }
            }
        },
        data() {
            return {

            }
        },
        mounted(){
            if(this.formLabelWidth){
                this.computedElementItems.forEach(elementItem=>{
                    if (elementItem.element.isBlock) {
                        let refs = this.$refs['elFormItem' + elementItem.field.name]
                        if (!refs) {
                            return
                        }
                        if (this.$stArrayTools.isArray(refs)) {
                            refs.forEach(ref=>{
                                // el-form-item__content
                                ref.$el.lastChild.style='width: calc(100% - '+ this.formLabelWidth +')'
                            })
                        }else {
                            // el-form-item__content
                            refs.$el.lastChild.style='width: calc(100% - '+ this.formLabelWidth +')'
                        }

                    }
                })
            }

        },
        methods: {
            imageSrc(name) {
                return this.$stObjectTools.getVal(this.form,name,this.getValParam())
            },
          ensureImageSrcIsString(url){
            if(url){
              if(typeof url == 'string'){
                return url
              }else {
                // 做为数组处理,取第一个，在点击预览的时候，会展示多个
                return url[0]
              }
            }
            return url
          },

          ensureImageSrcIsArray(url){
            if(url){
              if(typeof url == 'string'){
                return [url]
              }else {
                // 做为数组处理,取第一个，在点击预览的时候，会展示多个
                return url
              }
            }
            return []
          },
            txtValue(name){
                let r = this.$stObjectTools.getVal(this.form,name,this.getValParam())
                if(r === 0){
                    return r
                }
                if(typeof r == 'boolean'){
                    return r ? '是' : '否'
                }
                return r
            },
            getFormItemRules(elementItem) {
                let r = []
                if (elementItem.element.required) {
                    if(this.$stObjectTools.getVal(elementItem.element,'required',this.getValParam())){
                        r.push({required: true, message: `${elementItem.element.label}不能为空`, trigger: 'blur'})
                    }
                }
              if (elementItem.element.mobile === true) {
                r.push({ pattern:/^[1][0-9]{10}$/, message: '请输入正确的手机号', trigger: ['blur'] })
              }
              if (elementItem.element.email === true) {
                r.push({ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur'] })
              }
                // 验证规则
                if(elementItem.element.rules){
                  elementItem.element.rules.forEach(item =>  {
                    r.push(item)
                  })
                }
                return r
            },
            getValParam() {
                let $route = this.$route
                let $vm = this
                return {form: this.form,
                    formExtData:this.formExtData,$route,$vm}
            }
        }
    }
</script>

<style scoped>

</style>
<style>
/*自定义一个属性，用来将 formitem block样式化*/
    .el-form-item[stelementblock='st-element-item-block']{
        width: 100%;
    }
   div[stelementblock='st-element-item-block'] .el-form-item__content {
        width: 50%;/* 这个值不准确，给了个大概，如果想要准确，请设置表单labelWidth */
    }
</style>